<template>
<!--我的订单-->
  <div class="orders">
      <div class="titleWrap font14">
        <p class="titleName">我的积分</p>
        <!--<router-link to="/rule" class="pull-right"><Icon type="ios-information-circle-outline" /></router-link>-->
      </div>
      <p class="mypoint font14">您目前累计获得：<span>{{integral}}</span>积分</p>
      <span v-if="data1.length > 0">
        <div class="tableout">
          <Table :columns="columns1" :data="data1"></Table>
        </div>
        <div class="pageout"><Page :total="total" :current="pageNumber" :page-size="size" @on-change="changePage" /></div>
      </span>
      <span v-else>
        <nodata tip="暂时还没有积分记录哦~"></nodata>
      </span>
      <Spin fix v-show="isSpinShow" >
        <div class="loader">
          <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
          <div class="font14">加载中...</div>
        </div>
      </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .titleWrap {
    height: 40px;
    /*font-size: 18px;*/
    padding-bottom: 20px;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    .titleName {
      float: left;
      line-height: 24px;
      color: #957960;
      border-bottom: 3px solid #957960;
      padding-bottom: 13px;
    }
    a{
      font-weight: 700;
      color: #957960;
    }
  }
  .ivu-table th,
  .ivu-table td {
    font-size: 14px;
  }
  .tableout {
    margin-top: 20px;
  }
  .mypoint {
    /*font-size: 16px;*/
    margin-top: 12px;
    color: #666;
    text-align: left;
     span {
      color: #FF3300;
      font-size: 30px;
    }
  }
  .pageout {
    text-align: center;
    margin-top: 25px;
    height: 34px;
  }
</style>
<script type="text/ecmascript-6">
  import nodata from '../template/null'
  import {myIntegralRecordWeb,centreInfoWeb} from '../../http'
  import {getStore} from '../../storage'
  import imgPathFilter from '../../myFilters'
    export default {
        name: 'orderdetail',
        props: {},
        data() {
            return {
              center:"center",
              isSpinShow:false,
              total:0,        //总页数
              size:20,        //每页条数
              pageNumber:1,
              integral:0,     //总积分
              records:'',     //积分记录
              columns1: [     //记录表单
                {
                  title: '积分来源',
                  key: 'recordBody',
                  align:"center"
                },
                {
                  title: '分值',
                  key: 'integral',
                  align:"center"
                },
                {
                  title: '获得时间',
                  key: 'createTime',
                  align:"center"
                }
              ],
              data1: ''
            };
        },
        methods: {
          //换页
          changePage(pageNumber){
            this.pageNumber = pageNumber;
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //根据页码获取积分记录信息
                  myIntegralRecordWeb({pageNumber: this.pageNumber,pageSize:this.size}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.total = res.data.records.total;
                      this.data1 = res.data.records.rows;
                      this.integral = res.data.integral;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          getJifen(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  myIntegralRecordWeb({pageNumber: this.pageNumber,pageSize:this.size}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      //获取积分记录信息
                      this.total = res.data.records.total;
                      this.data1 = res.data.records.rows;
                      this.integral = res.data.integral;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
            }
          }
        },
        created() {
          this.getJifen();
        },
        components: {
          nodata,
        }
    }
</script>
